<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气查询</title>
</head>
<body>
    <h1>天气查询</h1>
    <h3>请输入要查询的城市：</h3>
    <div>
        <label for="city"></label>
        <input type="text" name="city" id="city" value="北京" placeholder="城市">
        <input type="button" value="查询" name="search" id="search" onclick="search()">
    </div>
    <h3>查询结果</h3>
    <ul>
        <li>城市：<span name="city"></span></li>
        <li>天气：<span name="wea"></span></li>
        <li>平均温度：<span name="tem"></span></li>
        <li>温馨提示：<span name="air_tips"></span></li>
    </ul>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#search').click();
        });

        function search() {
            $.get({
                url: 'https://www.tianqiapi.com/api',
                data: {
                    version: 'v6',
                    appid: '91982274',
                    appsecret: 'khf875YR',
                    city: $('#city').val()
                },
                success: function (data) {
                    $('span[name="city"]').text(data.city);
                    $('span[name="wea"]').text(data.wea);
                    $('span[name="tem"]').text(data.tem);
                    $('span[name="air_tips"]').text(data.air_tips);
                },
                dataType: 'json'
            });
        }
    </script>
</body>
</html>